<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
      size="small"
    >
      <el-form-item label="仪表类型" prop="meterType">
        <el-select
          clearable
          v-model="queryParams.meterType"
          placeholder="请选择仪表类型"
        >
          <el-option
            v-for="item in meterTypeList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
        </el-select>
      </el-form-item>
      <el-form-item label="仪表编码" prop="meterNum">
        <el-input
          v-model="queryParams.meterNum"
          placeholder="请输入仪表编码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="仪表型号" prop="meterModel">
        <el-input
          v-model="queryParams.meterModel"
          placeholder="请输入仪表型号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="仪表状态" prop="state">
        <el-select
          clearable
          v-model="queryParams.state"
          placeholder="请选择仪表状态"
        >
          <el-option
            v-for="item in workState"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['energy:nyMeterAccount:add']"
        >新增
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['energy:nyMeterAccount:edit']"
        >修改
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['energy:nyMeterAccount:remove']"
        >删除
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['energy:nyMeterAccount:export']"
        >导出
        </el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="nyMeterAccountList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="仪表类型" align="center" prop="meterTypeNew"/>
      <!--字段添加跳转，path 表示跳转路径，query 表示参数-->
      <el-table-column label="仪表编码" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <router-link :to="{ path: 'energyMeterPrivateTable',query: { sumId: scope.row.id} }" class="link-type">
            <span>{{ scope.row.meterNum }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="仪表型号" align="center" prop="meterModel"/>
      <el-table-column label="园区" align="center" prop="parkNum"/>
      <el-table-column label="楼栋" align="center" prop="buildingNum"/>
      <el-table-column label="安装位置" align="center" prop="installPosition"/>
      <el-table-column label="设备状态" align="center" prop="stateNew"/>
      <el-table-column label="倍率" align="center" prop="magnification"/>
      <el-table-column label="初始读数" align="center" prop="initialValue"/>
      <el-table-column label="当前读数" align="center" prop="currentValue"/>
      <!--<el-table-column label="分摊池初始值" align="center" prop="shareInitialValue"/>-->
      <el-table-column label="上级表" align="center" prop="parentNum"/>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['energy:nyMeterAccount:edit']"
          >修改
          </el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['energy:nyMeterAccount:remove']"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改仪台账对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form
        ref="form"
        size="small"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="仪表类型" prop="meterType">
          <el-select
            clearable
            v-model="form.meterType"
            placeholder="请选择仪表类型"
          >
            <el-option
              v-for="item in meterTypeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仪表编码" prop="meterNum">
          <el-input v-model="form.meterNum" placeholder="请输入仪表编码"/>
        </el-form-item>
        <el-form-item label="仪表型号" prop="meterModel">
          <el-input v-model="form.meterModel" placeholder="请输入仪表型号"/>
        </el-form-item>
        <el-form-item label="园区" prop="parkNum">
          <!--<el-input v-model="form.parkNum" placeholder="请输入园区"/>-->
          <el-select v-model="form.parkNum" placeholder="请选择园区" @change="selectPark">
            <el-option
              v-for="item in parkList"
              :key="item.id"
              :label="item.parkNum"
              :value="item.parkNum"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋" prop="buildingNum">
          <!--<el-input v-model="form.buildingNum" placeholder="请输入楼栋"/>-->
          <el-select v-model="form.buildingNum" placeholder="请选择楼栋">
            <el-option
              v-for="item in buildingList"
              :key="item.id"
              :label="item.buildingNum"
              :value="item.buildingNum"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="安装位置" prop="installPosition">
          <el-input
            v-model="form.installPosition"
            placeholder="请输入安装位置"
          />
        </el-form-item>
        <el-form-item label="仪表状态" prop="state">
          <el-select
            clearable
            v-model="form.state"
            placeholder="请选择仪表状态"
          >
            <el-option
              v-for="item in workState"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="倍率" prop="magnification" v-show="form.meterType != '水表'">
          <el-input v-model="form.magnification" placeholder="请输入倍率"/>
        </el-form-item>
        <el-form-item label="初始读数" prop="initialValue">
          <el-input v-model="form.initialValue" placeholder="请输入初始读数"/>
        </el-form-item>
        <!--<el-form-item label="分摊池初始值" prop="shareInitialValue">-->
          <!--<el-input-->
            <!--v-model="form.shareInitialValue"-->
            <!--placeholder="请输入分摊池初始值"-->
          <!--/>-->
        <!--</el-form-item>-->
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listNyMeterAccount,
    getNyMeterAccount,
    delNyMeterAccount,
    addNyMeterAccount,
    updateNyMeterAccount
  } from '@/api/smartParks/energy/energyMeterSummaryTable'
  import { listData } from '@/api/system/dict/data' //字典接口
  import { listBuiPark } from '@/api/parkAssets/enterCommunity'
  import { listBuiBuilding } from '@/api/parkAssets/building'

  export default {
    name: 'NyMeterAccount',
    components: {},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 仪台账表格数据
        nyMeterAccountList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          meterType: null,
          meterNum: null,
          meterModel: null,
          installPosition: null,
          state: null,
          magnification: null,
          initialValue: null,
          //shareInitialValue: null,
          parentId: null,
          tenantId: null,
          category: 1
        },
        // 表单参数
        form: {},
        meterTypeList: [],
        workState: [],
        parkList: [],
        buildingList: [],
        // 表单校验
        rules: {
          meterType: [
            {
              required: true,
              message: '仪表类型不能为空',
              trigger: 'change'
            }
          ]
        }
      }
    },
    created() {
      // 解析路由参数
      const sumId = this.$route.query.sumId
      this.queryParams.parentId = sumId
      this.getList()
      this.getListFirst()
      this.getParkList()
    },
    methods: {
      getListFirst() {
        listData({ dictType: 'meter_type' }).then((response) => {
          this.meterTypeList = response.rows
        })
        listData({ dictType: 'device_work_state' }).then((response) => {
          this.workState = response.rows
        })
      },
      getParkList() {
        //查询园区列表，赋值给parkList;
        listBuiPark().then((response) => {
          this.parkList = response.rows
        })
      },
      selectPark() {
        //buildingList,parkList
        const self = this
        self.form.buildingNum = ''
        let id = self.parkList.filter(item => item.parkNum === self.form.parkNum)[0].id

        listBuiBuilding({ parkId: id }).then((response) => {
          self.buildingList = response.rows
        })
      },
      /** 查询仪台账列表 */
      async getList() {
        this.loading = true
        await this.getListFirst()
        listNyMeterAccount(this.queryParams).then((response) => {
          response.rows.forEach((item) => {
            this.meterTypeList.forEach((itemType) => {
              if (itemType.dictValue === item.meterType) {
                item.meterTypeNew = itemType.dictLabel
              }
            })
            this.workState.forEach((itemType) => {
              if (itemType.dictValue === item.state) {
                item.stateNew = itemType.dictLabel
              }
            })
          })
          this.nyMeterAccountList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          meterType: null,
          meterNum: null,
          meterModel: null,
          installPosition: null,
          state: null,
          magnification: null,
          initialValue: null,
          //shareInitialValue: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          category: 1
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = '添加仪表台账'
        this.form.parentId = this.queryParams.parentId
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const id = row.id || this.ids
        getNyMeterAccount(id).then((response) => {
          this.form = response.data
          this.open = true
          this.title = '修改仪表台账'
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
              updateNyMeterAccount(this.form).then((response) => {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addNyMeterAccount(this.form).then((response) => {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids
        this.$confirm('是否确认删除仪台账的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(function() {
            return delNyMeterAccount(ids)
          })
          .then(() => {
            this.getList()
            this.msgSuccess('删除成功')
          })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          'energy/nyMeterAccount/export',
          {
            ...this.queryParams
          },
          `energy_nyMeterAccount.xlsx`
        )
      }
    }
  }
</script>




